<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>12354山卡拉火车网-登陆页</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"  media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
</head>
<body>
<style>
    .bg-blue{
        background-color: #3B99FC;
    }
    .blue{
        color: #3B99FC;
    }
</style>
<!-- 1.最上方的logo跟登陆 -->
<div class="container" style="height: 50px;">
    <style>
        .a-color {
            color: white;
        }
    </style>
    <div class="row" style="margin-top: 10px;">
        <!-- 这是logo图片 -->
        <div class="col-md-2"style="margin-top: 2px;">
            <a th:href="@{/index}" >
                <img th:src="@{/img/logo.png}" class="img-rounded" alt="无法加载图片">
            </a>
        </div>
        <div class="col-md-2" style="">
            <a th:href="@{/index}" style="text-decoration: none;">
                <i class="blue" style="text-decoration: none; font-size: 20px"><b>山卡拉火车12354</b></i>
                <br>
                <small class="blue">&nbsp;-- 假的火车网</small>
            </a>
        </div>
    </div>
</div>
<br/>
<!--轮播图-->
<div th:insert="components/public/carousel :: html"></div>
<!--专属登陆框-->
<div class="container" style="position: absolute;top: 50%;left: 50%;">
    <style>
        .login-box{
            color: #333;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: #fff;
            width: 400px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: 225px;
            margin-top: -249px;
        }
        .login-hd{
            color: #333;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
            height: 86px;
            overflow: hidden;
            line-height: 36px;
            padding: 30px 30px 20px;
            font-size: 26px;
            font-weight: 700;
        }
        .login-account{
            color: #333;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            box-sizing: border-box;
            padding: 0 30px 15px 30px;
        }
        .input{
            -webkit-text-size-adjust: 100%;
            margin: 0;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            line-height: 20px;
            padding: 6px 10px;
            background-color: #fff;
            color: #333;
            outline: none;
            font-size: 14px;
            vertical-align: middle;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            box-sizing: border-box;
            display: block;
            width: 100%;
            height: 40px;
            padding-left: 25px;
            border: none;
            border-bottom: 1px solid #E6E6E6;
            border-radius: 0;
            font-size: 17px;
        }
        .login-item{
            color: #333;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            box-sizing: border-box;
            position: relative;
            height: 40px;
            padding: 5px 0;
            margin-bottom: 16px;
        }
        .text-light{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 2.0;
            margin: 0;
            color: #666 !important;
            box-sizing: border-box;
            position: relative;
            height: 40px;
            padding: 5px 0;
            margin-bottom: 16px;
        }
        .login-btn{
            color: white;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .btn-primary{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            text-decoration: none;
            min-width: 80px;
            padding: 6px 10px;
            border: 1px solid #E6E6E6;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            outline: none;
            position: relative;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,color ease-in-out .15s,background ease-in-out .15s;
            width: 100% !important;
            box-sizing: border-box;
            /* background: #FF8000; */
            color: white;
            /* border-color: #FF8000; */
            display: block;
            border-radius: 4px;
            line-height: 28px;
            height: 42px;
            font-size: 18px;
        }
        .login-bd{
            color: #3B99FC;
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .login-txt{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            line-height: 20px;
            margin-top: 10px;
            color: #666;
        }
        .login-ft{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            line-height: 1.5;
            margin: 0;
            box-sizing: border-box;
            padding: 15px 20px 15px;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #E6E6E6;
            background-color: #f5f5f5;
            border-radius: 0 0 4px 4px;
            text-align: justify;
        }
        .a-text-noline{
            text-decoration: none;
        }
        .text-primary{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 20px;
            background-color: transparent;
            color: #3B99FC !important;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            margin: 0 5px;
        }
        .icon .icon-user{
            -webkit-text-size-adjust: 100%;
            font-weight: 400;
            line-height: 40px;
            text-align: left;
            color: #dadada;
            font-family: "icon" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
        }
        .login-error{
            -webkit-text-size-adjust: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            margin: 0;
            box-sizing: border-box;
            padding: 7px 0;
            line-height: 20px;
            color: red;
            margin-top: -16px;
            /* display: none; */
            text-align: center;
        }
    </style>
    <div class="row" style="position: absolute; top: 50%;">
        <div class="col-md-5">
            <div class="login-box" id="J-login-box" data-popup="0" style="margin-top: -249px;">
                <ul class="login-hd">
                    <li class="login-hd-account" >登陆</li>
                </ul>
                <div class="login-bd">
                    <!-- 账号登录 -->
                    <form id="login_form">
                        <div class="login-account form-horizontal">
                        <div class="login-item ">
                            <label for="identify" class="item-label">
                            </label>
                            <input type="text" class="input" name="identify" id="identify" placeholder="用户名/手机号">
                        </div>
                        <div class="login-item">
                            <label for="password" class="item-label"><i class="icon icon-pwd"></i></label>
                            <input type="password" class="input" name="password" id="password" placeholder="密码">
                        </div>

                        <div id="J-slide-passcode" class="nc-container"></div>
                        <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->


                        <div class="login-item text-light">
                            <!-- <label class="pull-left"><input type="checkbox"><span class="ml">Remember me</span></label> -->
                            <a id="J-forgot-password" href="javascript:;" class="pull-right text-light" style="text-decoration: none;">忘记密码</a>
                        </div>
                        <!-- 错误提示信息框 -->
                        <div class="login-error" id="error_msg" style="margin-top: 0px;" >
                            &nbsp;
                            <span th:if="${tip}==1">您还没有登陆, 请登录~</span>
                            <span th:if="${tip}==2" style="color: green">注册成功, 请登录~</span>
                        </div>
                        <div class="login-btn">
                            <a id="submit_btn" href="javascript:;" class="btn-primary btn form-block" style="background-color: #3B99FC">登陆</a>
                        </div>
                        <div class="login-txt">
                            还没有账号 ?<a id="J-register" th:href="@{/register}" class="text-primary" style="text-decoration: none;">马上注册</a>!
                        </div>
                    </div>
                    </form>
                </div>
                <div class="login-ft">
                    <p>1.12354.com网站每天提供5:00至11:30（中国标准时间）的服务。</p>
                    <p>2.12354.com网站办理票务签注和退票，签注时间不晚于车票日期24:00，变更目的地时间不晚于发车前48小时，退票时间不晚于列车发车时间。</p>
                </div>
            </div>
        </div>
    </div>


    <script>
        $('#submit_btn').click(function () {
            let identify = $('#identify').val();
            let password = $('#password').val();
            $.ajax({
                url:"/user/login",
                type: "post",
                data: {identify,password},
                success: function (result) {
                    if(result.flag){
                        window.location.href=result.url;
                    }else {
                        $("#error_msg").text(result.msg);
                    }
                }
            })
        })
    </script>
</div>
<!--尾部-->
<div th:insert="components/public/footer :: html" style="position:absolute; top: 89%;width: 100%"></div>
</body>
</html>